<template>
  <el-container class="bg-pc" style="height:100vh">
    <el-header class="header-pc" :height="'48px'">
      <Live-Header @back="back"></Live-Header>
    </el-header>
    <el-main class="main-pc">
      <div class="pos-l-res">
        <el-container style="height:100%">
          <el-main class="p0">
            <!-- <pre style="color:#fff">{{ objRoom }}</pre> -->
            <rdiv :whr="'16:9'">
              <LiveVideo class="video-box" ref="video"></LiveVideo>
            </rdiv>
          </el-main>
          <el-footer class="footer-pc" :height="'48px'">
            <Switch-Line></Switch-Line>
          </el-footer>
        </el-container>
      </div>
      <div class="pos-r-fix">
        <ltdTabs v-model="activeTab">
          <ltdTab title="互动" :index="0">
            <!-- 互动 -->
            <ChatByCus></ChatByCus>
          </ltdTab>
          <ltd-tab title="介绍" :index="1">
            <RoomInfo></RoomInfo>
          </ltd-tab>
        </ltdTabs>
      </div>
    </el-main>
    <WS></WS>
  </el-container>
</template>
<script>
import { bus } from '@/bus.js';
import { mapState, mapMutations } from 'vuex';
export default {
  name: 'indexPC',
  mixins: [], //混入
  components: {
    ltdTabs: () => {
      return import('@/components/ltd-tabs.vue');
    },
    ltdTab: () => {
      return import('@/components/ltd-tab.vue');
    },
    rdiv: () => {
      return import('@/components/rdiv.vue');
    },
    LiveVideo: () => {
      return import('@/components/liveVideo.vue');
    },
    LiveHeader: () => {
      return import('./PC/liveHeader.vue');
    },
    SwitchLine: () => {
      return import('./PC/switchLine.vue');
    },

    ChatByCus: () => {
      return import('../components/ChatByCusPC.vue');
    },
    RoomInfo: () => {
      return import('./PC/roomInfo.vue');
    },
    WS: () => {
      return import('../components/chat/wsChat.vue');
    },
  }, //组件
  props: {}, //集成属性
  data() {
    return {
      activeTab: 0,
    };
  },
  computed: {
    ...mapState(['objRoom']),
  },
  methods: {
    ...mapMutations([]),
    test: function() {
      console.log('test');
    },
    ajaxData: function() {
      let _ = this._;
      let params = { roomId: _.get(this.$route.query, 'roomId') };
      this.$api.获取直播间具体内容(params).then((res) => {
        // this.objres = res.data;
        if (res.code == 200) {
          this.$store.commit('setRoom', res.data);
          setTimeout(() => {
            bus.$emit('获得推流地址', res.data);
          }, 1000 * 1);
        } else {
          this.$message.error('获取直播间具体内容失败' + res.code);
        }
      });
    },
    back: function() {
      console.log('back');
      this.$router.push({
        path: `/enterList`,
        query: { ...this.$route.query },
      });
    },
    exit: function() {},
  },
  beforeCreate: function() {},
  created: function() {},
  beforeMount: function() {},
  mounted: function() {
    let _ = this._;
    let query = this.$route.query;
    let room4Query = {
      eSCompanyId: _.get(query, 'escompanyid'),
      unionId: _.get(query, 'unionid'),
      roomId: _.get(query, 'roomid'),
    };
    this.ajaxData();
    bus.$on('back', () => {
      this.exit();
    });
    bus.$on('当前用户可能异地登录', (msg) => {
      this.exit();
    });
  },
  beforeUpdate: function() {},
  updated: function() {},
  beforeDestroy: function() {
    bus.$on('当前用户可能异地登录');
  },
  destroyed: function() {},
};
</script>
<style lang="less" scoped>
@bg-pc: #1d2125;
.bg-pc {
  background-color: @bg-pc;
  color: var(--color-text-default, #b6c2cf);

  /* 14/中-400 */
  font-family: 'PingFang SC';
  font-size: var(--Font-Size-14, 14px);
  font-style: normal;
  font-weight: 400;
  line-height: var(--Line-Height-14, 22px); /* 157.143% */
}
.header-pc {
  line-height: 48px;
  padding-left: 8px;
  padding-right: 8px;
  background-color: @bg-pc;
  color: var(--color-text-default, #b6c2cf);
  border-bottom: 1px solid var(--color-border-default, #38414a);
}
.footer-pc {
  line-height: 48px;
  border-top: 1px solid var(--color-border-default, #38414a);
}
.main-pc {
  position: relative;
  overflow: hidden;
  padding: 0;
  background-color: @bg-pc;
  @fixRight: unit((224+8+8), px);
  .pos-l-res {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: @fixRight;
  }
  .pos-r-fix {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: @fixRight;
    border-left: 1px solid var(--color-border-default, #38414a);
  }
}
</style>
